<template>
	<view class="home">
		<custom-navbar title='政策列表' :show-back="true" @back="handleBack" />

		<view class="content " :style="{ paddingTop: navBarHeight + 'px' }">
			<view class="search mb37 p0030">
				<view class="mb16 f30bc3 fcs">
					<view>实时政策通知</view>
				</view>
				<view class="box fcc mb30">
					<up-search shape="square" placeholder="请输入政策名称" v-model="policy_title"
						:showAction="false"></up-search>
					<up-button @click="getProductName()" type="primary"
						style="width: 140rpx;height: 60rpx;background: #398DFB;border-radius: 10rpx 10rpx 10rpx 10rpx;"
						text="确定"></up-button>
				</view>
				<view class="flex ">
					<view v-for='(item,index) in data16' class="typelist fcolcc mr30">
						<view class="f30bc3" :class="policy_category == item.value ? 'c398DFB' :''"
							@click="Switchingsupply_demand(item.value)">
							{{item.label}}
						</view>
						<view :class="policy_category == item.value ? 'underline' :''"></view>
					</view>
				</view>
			</view>
			<view class="p2430 notice">
				<image class="noticeBg mb20" :src="cdn('noticeBg.jpg')">
				</image>
				<view class="noticeList p30">
					<view class="item" v-for="(item,index) in noticeList" :key="index" @click="handleDetails(item)">
						<view class="fcsb">
							<view class="fcols">
								<view class="f286c3 mb50">{{item.policy_title}}</view>
								<view class="f245c9">{{item.create_time}}</view>
							</view>
							<view class="item-rigth">
								<image class="noticeImg" :src="item.policy_image"></image>
								<!-- <view class="noticeImg"></view> -->
								<image v-if='item.is_top ==1' class="top" src="/static/images/Industry/置顶.svg"></image>
							</view>
						</view>
						<up-line margin='40rpx 0 40rpx 0'></up-line>
					</view>
				</view>
			</view>
		</view>

	</view>

</template>

<script setup>
	import CustomNavbar from '@/components/custom-navbar.vue'
	import {
		ref,
		onMounted,
		computed
	} from 'vue';
	import {
		onLoad,
		onReachBottom,
		onShow,
		onPullDownRefresh,
	} from '@dcloudio/uni-app'
	import {
		getCurrentInstance
	} from 'vue'
	import {
		PolicyLists
	} from '@/api/policy'
	import {
		getClassification
	} from '@/api/login'
	// 获取全局cdn方法
	const {
		proxy
	} = getCurrentInstance()
	const cdn = (path) => proxy.$cdn + path
	// 2. 获取系统信息（同步操作放在setup最前面）
	const systemInfo = uni.getSystemInfoSync()

	// 3. 定义响应式数据
	const searchKey = ref('')

	// 4. 计算属性
	const navBarHeight = computed(() => systemInfo.statusBarHeight + 44)
	const data16 = ref([])
	const loading = ref(false)
	// 单独请求 getClassification(16) 接口
	const fetchData = async () => {
		try {
			loading.value = true
			const res = await getClassification(3)
			data16.value = res.data
			policy_category.value = data16.value[0]?.value || '' // 添加可选链操作符防止undefined
			getPolicyLists()
		} catch (error) {
			console.error('请求分类数据失败:', error)
			uni.showToast({
				title: '加载分类失败',
				icon: 'none'
			})
		} finally {
			loading.value = false
		}
	}
	onMounted(fetchData)
	// 供需大厅
	const page = ref(1)
	const limit = ref(10)
	const policy_module = ref(3)
	const policy_category = ref('')
	const policy_title = ref('')
	const noticeList = ref([
		// {
		// 	img: '/static/images/policy/noticeImg.jpg',
		// 	text: '国家级政策——科技园区 税收专项优惠',
		// 	date: '4月30号'
		// },
		// {
		// 	img: '/static/images/policy/noticeImg.jpg',
		// 	text: '国家级政策——科技园区 税收专项优惠',
		// 	date: '4月30号'
		// },
		// {
		// 	img: '/static/images/policy/noticeImg.jpg',
		// 	text: '国家级政策——科技园区 税收专项优惠',
		// 	date: '4月30号'
		// }, {
		// 	img: '/static/images/policy/noticeImg.jpg',
		// 	text: '国家级政策——科技园区 税收专项优惠',
		// 	date: '4月30号'
		// },
		// {
		// 	img: '/static/images/policy/noticeImg.jpg',
		// 	text: '国家级政策——科技园区 税收专项优惠',
		// 	date: '4月30号'
		// },
		// {
		// 	img: '/static/images/policy/noticeImg.jpg',
		// 	text: '国家级政策——科技园区 税收专项优惠',
		// 	date: '4月30号'
		// }
	])

	const getPolicyLists = async () => {
		const parmas = {
			lang_code: 'zh',
			limit: limit.value,
			page: page.value,
			policy_module: policy_module.value,
			policy_category: policy_category.value,
			policy_title: policy_title.value
		}
		try {
			const Res = await PolicyLists(parmas)
			if (Res.code === 200) { // 注意这里是 ===，不是 =
				noticeList.value = Res.data.data

			}
		} catch (error) {
			console.error('获取政策列表失败:', error)
			uni.showToast({
				title: '加载政策列表失败',
				icon: 'none'
			})
		}
	}
	const Switchingsupply_demand = (val) => {
		policy_category.value = val
		getPolicyLists()
	}
	const getProductName = () => {
		getPolicyLists()
	}
	const handleBack = () => {
		uni.switchTab({
			url: '/pages/index/index'
		});
	};
	// 跳转详情
	const handleDetails = (val) => {
		uni.navigateTo({
			url: `/pages/policy/details?policy_id=${val.policy_id}` // 假设item对象中有id字段
		});
	}
</script>

<style lang="scss" scoped>
	.home {
		width: 100%;
		min-height: 100vh;
		overflow: hidden; // 防止页面整体滚动

		.content {
			padding-top: var(--status-bar-height);
			padding-top: calc(var(--status-bar-height) + 70rpx);
			/* 导航栏高度 */
			height: 100%;
			display: flex;
			flex-direction: column;
			// flex-direction: column;
			// align-items: center;
			// justify-content: center;

			.search {
				width: 100%;
				// height: 213rpx;
				background: #FFFFFF;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				padding: 16rpx 30rpx 30rpx 30rpx;
				box-sizing: border-box;

				.box {
					width: 100%;
					height: 90rpx;
					background: #F3F3F3;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
				}

				.typelist {
					position: relative;

					.underline {
						width: 40rpx;
						height: 4rpx;
						background: #398DFB;
						border-radius: 500rpx 500rpx 500rpx 500rpx;
						position: absolute;
						bottom: -23rpx;
						// left: 0;
					}
				}
			}

			.notice {
				.noticeBg {
					height: 320rpx;
					width: 100%;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
				}

				.noticeList {
					background: #FFFFFF;
					border-radius: 20rpx 20rpx 20rpx 20rpx;

					.item {
						// height: 168rpx;

						.item-rigth {
							position: relative;

							.noticeImg {
								width: 299rpx;
								height: 168rpx;
								background: pink;
							}

							.top {
								position: absolute;
								width: 90rpx;
								height: 45rpx;
								right: 16rpx;
								top: 16rpx;
							}
						}
					}
				}
			}


		}
	}
</style>